<template>
  <div class="center-view hidden-scrollbar">
    <div class="avator">
      <img @click="userLogin('登录')" src="@/assets/images/avator-icon.jpg" alt="avator-icon" class="avator-icon">
      <div @click="userLogin('登录')" class="nick-name">立即登录</div>
    </div>
    <ul class="my-order-tab">
      <li>
        <img @click="userLogin('查看电影订单')" src="@/assets/images/movie-order-icon.png" alt="movie-order-icon">
        <span @click="userLogin('查看电影订单')">电影订单</span>
      </li>
      <li>
        <img @click="userLogin('查看商品订单')" src="@/assets/images/goods-order-icon.png" alt="goods-order-icon">
        <span @click="userLogin('查看商品订单')">商品订单</span>
      </li>
    </ul>
    <ul class="my-card">
      <li @click="userLogin('查看卖座券')">
        <img src="@/assets/images/maizuo-tickets-icon.png" alt="maizuo-tickets-icon">
        <span>卖座券</span>
        <i class="iconfont icon-you"></i>
      </li>
      <li @click="userLogin('查看组合红包')">
        <img src="@/assets/images/red-envlp-icon.png" alt="red-envlp-icon">
        <span>组合红包</span>
        <i class="iconfont icon-you"></i>
      </li>
      <li @click="userLogin('查看余额')">
        <img src="@/assets/images/balance-icon.png" alt="balance-icon">
        <span>余额</span>
        <b>￥0.00</b>
        <i class="iconfont icon-you"></i>
      </li>
      <li @click="userLogin('咨询客服')">
        <img src="@/assets/images/help-icon.png" alt="help-icon">
        <span>帮助与客服</span>
        <i class="iconfont icon-you"></i>
      </li>
      <li @click="userLogin('设置')">
        <img src="@/assets/images/settings-icon.png" alt="settings-icon">
        <span>设置</span>
        <i class="iconfont icon-you"></i>
      </li>
    </ul>
  </div>
</template>

<script>
import { Dialog } from 'vant'

export default {
  name: 'CenterView',
  methods: {
    userLogin (msg) {
      Dialog.alert({
        message: `仅供学习，不支持${msg}`,
        theme: 'round-button'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.center-view {
  background-color: #f4f4f4;
  .avator {
    background-image: url('@/assets/images/bg-image.png');
    background-size: cover;
    background-position: 0px -44px;
    height: 156px;
    overflow: hidden;
    display: flex;
    .avator-icon {
      width: 67px;
      height: 67px;
      border-radius: 50%;
      margin: 54px 20px 0px 22px;
      border: 2px solid #fff;
    }
    .nick-name {
      color: #fff;
      height: 24px;
      margin-top: 78px;
    }
  }
  .my-order-tab {
    color: #797d82;
    display: flex;
    height: 80px;
    align-items: center;
    background-color: white;
    margin-bottom: 10px;
    li {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 26px;
        height: 26px;
      }
      span {
        margin-top: 5px;
        font-size: 13px;
      }
    }
  }
  .my-card li {
    display: flex;
    padding: 0 15px;
    justify-content: space-around;
    align-items: center;
    background-color: white;
    height: 50px;
    border-bottom: 1px solid #f4f4f4;
    img {
      width: 20px;
      height: 20px;
      margin-right: 15px;
    }
    span {
      font-size: 15px;
      display: block;
      flex-grow: 1;
    }
    b {
      font-size: 15px;
      font-weight: normal;
      color: #797d82;
      margin-right: 10px;
    }
    i {
      display: inline-block;
      font-size: 12px;
      color: #797d82;
      transform: scale(0.8);
      margin-right: -2px;
    }
  }
}
</style>
